<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="item in person">
          <input type="checkbox" v-model="item.done" /> {{item.name}}
        </li>
      </ul>
      <input type="checkbox" v-model="all" /> 全选
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            person: [
              { id: 1, name: "小王", done: false },
              { id: 2, name: "老张", done: false },
              { id: 3, name: "李四", done: false },
            ],
          };
        },
        computed: {
          all: {
            set(newVal) {
              this.person.forEach((item) => {
                item.done = newVal;
              });
            },
            get() {
              return this.person.every((item) => item.done);
            },
          },
        },
      });
    </script>
  </body>
</html>
